<template>
  <div class="page" v-loading="fullscreenLoading">
    <div class="top-detail">
      <div class="work-name">
        <div class="title-name" :title="detail.mainName || '--'">{{ detail.mainName || '--' }}</div>
      </div>
      <div class="label-value" v-if="detail.taskType == '10'" style="max-width: 400px;" :title="detail.specializedName">
        承接专项：{{ detail.specializedName || '--' }}</div>
      <div class="label-value" v-if="detail.taskType == '20'" :title="detail.deptName">科室：{{ detail.deptName || '--' }}
      </div>
      <div class="label-value" v-if="detail.taskType != '70'">目标执行人：{{ detail.executorAcName || '--' }}
      </div>
      <div class="label-value" v-if="detail.taskType != '70'">计划开始时间：{{ detail.planBeginTime || '--' }}</div>
      <div class="label-value" v-if="detail.taskType != '70'">计划完成时间：{{ detail.planEndTime || '--' }}</div>
      <div class="label-value" v-if="detail.taskType != '70'">时间进度：{{ detail.timeProgress ?
        truncateToFixed(detail.timeProgress, 1) : 0 }}%</div>
      <!-- <div class="label-value">落实情况：<span :style="{ color: getColor(detail.taskImplementation), fontWeight: 900 }">{{
        detail.taskImplementation }}</span></div> -->
      <div class="label-value">当前状态：<span :style="{ color: getColor(detail.taskState), fontWeight: 900 }">{{
        getStateName(detail.taskState) }}</span></div>
    </div>
    <div class="detail-page" v-if="detail.taskState !== 4">
      <div class="left-box">
        <div class="btn-box">
          <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAddRole"
            v-if="detail.taskState != 2 && isHaveAdd()">新增</el-button>
          <el-button type="danger" icon="el-icon-delete" size="small" @click="handleDelete"
            v-if="isDel() && dataList.length">删除</el-button>
        </div>
        <el-row :gutter="10">
          <!-- <el-col :span="12" style="width:130px;">
            <el-date-picker v-model="month" type="month" placeholder="选择月">
            </el-date-picker>
          </el-col> -->
          <!-- <el-col :span="24" style="width:calc(100% - 130px);"> -->
          <el-col :span="24">
            <el-select style="width: 100%;" v-model="person" filterable remote placeholder="执行人搜索"
              :remote-method="remoteMethod" :loading="loading" clearable @change="searchPerson">
              <el-option v-for="item in options" :key="item.userName" :label="`${item.acName}(${item.cityName})`"
                :value="item.userName"></el-option>
            </el-select>
          </el-col>
        </el-row>
        <div class="table-box">
          <div class="table-item" v-for="item, i in dataList" :key="i"
            :class="[active == item.subId && 'table-item-choice']" @click="changeActive(item, i)">
            <div class="table-name" :title="item.subName">{{ item.subName }}</div>
            <div class="table-subExecutor" :title="item.subExecutorAcNames">执行人：{{ item.subExecutorAcNames || '--' }}
            </div>
            <div class="pie-box">
              <div class="num">{{ item.avgRating || 0 }}</div>
              <div class="name">自评分</div>
            </div>
            <!-- <div class="num-border" v-if="detail.taskType != '70'">
              <div class="num" :style="item.finishProgress == 100 ? { left: '-13px' } : {}">{{ item.finishProgress || 0
              }}%</div>
              <div class="zpf-num">{{ item.avgRating || 0 }}</div>
            </div> -->
          </div>
          <div v-if="!dataList.length" class="empty-box">
            <img src="../../assets/img/empty.png" width="120" />
            <div>暂无数据</div>
          </div>
        </div>
      </div>
      <div class="right-box">
        <div class="content-box" v-if="active">
          <div class="top-detail">
            <div class="work-name">
              <div class="title-name-text">{{ detailItem.subName || '--' }}<i class="el-icon-edit-outline"
                  v-if="detail.taskState != 2 && isMe()" @click="getEdit"></i></div>
            </div>
            <div class="label-value" v-if="detail.taskType != '70'">计划开始时间：{{ detailItem.planStartTime || '--' }}</div>
            <div class="label-value" v-if="detail.taskType != '70'">计划完成时间：{{ detailItem.planFinishTime || '--' }}</div>
            <!-- <div class="label-value">自评分：{{ detailItem.finishProgress || 0 }}</div> -->
          </div>
          <!--           <div class="detail-title">
              <div class="line" />子目标
          </div>
          <div class="detail-content">
            <el-form :model="detailForm" label-width="100px" label-position="top" style="width: 100%;">
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="子目标">
                    <el-input v-model="detailForm.subName" placeholder="请输入关键结果"
                      :disabled="detail.taskState == 2 || !isMe()" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计划开始时间" style="margin-bottom: 0;">
                    <el-date-picker v-model="detailForm.planStartTime" type="date" placeholder="选择日期"
                      :disabled="detail.taskState == 2 || !isMe()" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="计划完成时间" style="margin-bottom: 0;">
                    <el-date-picker v-model="detailForm.planFinishTime" type="date" placeholder="选择日期"
                      :disabled="detail.taskState == 2 || !isMe()" />
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="完成度(%)" style="margin-bottom: 0;">
                    <el-input-number v-model="detailForm.finishProgress" placeholder="请输入关键结果完成度"
                      :disabled="detail.taskState == 2 || !isMe()" controls-position="right" :min="0" :max="100"
                      :precision="0" :step="1" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form> 
          </div>-->
          <div class="detail-title">
            <div class="line" />本月工作
          </div>
          <div v-for="item, idx in workProgressList" :key="idx" class="detail-content">
            <i class="el-icon-delete" @click="delWorkProgress(idx)"
              v-if="detail.taskState != 2 && isMeWork() && !isUser(item)" />
            <el-form label-width="100px" label-position="top" style="width: 100%;">
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item :label="`本月关键结果${idx + 1}`">
                    <el-input v-model="item.taskName" placeholder="请输入本月关键结果" type="textarea"
                      :disabled="detail.taskState == 2 || !isMeWork() || isUser(item)"
                      :autosize="detail.taskType != '70' ? { minRows: 1, maxRows: 4 } : { minRows: 2, maxRows: 4 }" />
                  </el-form-item>
                </el-col>
                <el-col :span="detail.taskType == '70' ? 24 : 8" v-if="detail.taskType != '50'">
                  <el-form-item label="执行人">
                    <el-select v-model="item.batchExecutor" placeholder="请选择执行人" :disabled="detail.taskType != '70'">
                      <el-option v-for="v in zxrList" :key="v.userName" :label="`${v.acName}(${v.cityName})`"
                        :value="v.userName">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="detail.taskType != '50' ? 8 : 12" v-if="detail.taskType != '70'">
                  <el-form-item label="计划完成时间">
                    <el-date-picker v-model="item.endTime" type="date" placeholder="请选择完成时间" format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd" :disabled="detail.taskState == 2 || !isMeWork() || isUser(item)" />
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="6">
                  <el-form-item label="完成度(%)">
                    <el-input-number v-model="item.progress" placeholder="请输入完成度" controls-position="right" :min="0"
                      :disabled="detail.taskState == 2 || !isMeWork()" :max="100" :precision="0" :step="1" />
                  </el-form-item>
                </el-col> -->
                <el-col :span="detail.taskType != '50' ? 8 : 12" v-if="detail.taskType != '70'">
                  <el-form-item label="自评分">
                    <el-input-number v-model="item.selfRating" placeholder="请输入自评分（满分1分）" controls-position="right"
                      :min="0" :disabled="detail.taskState == 2 || !isMeWork() || isUser(item)" :max="1" :precision="2"
                      :step="0.1" />
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="关键结果达成情况">
                    <el-input v-model="item.taskDescription" placeholder="此月度关键结果实际在X月X日完成，完成进度XX%。"
                      :disabled="detail.taskState == 2 || !isMeWork() || isUser(item)" type="textarea"
                      :autosize="detail.taskType != '70' ? { minRows: 1, maxRows: 4 } : { minRows: 4, maxRows: 16 }" />
                  </el-form-item>
                </el-col>
                <!-- <el-col :span="24" v-if="detail.taskType != '70'">
                  <el-form-item label="工作任务">
                    <el-input v-model="item.workTask" type="textarea" placeholder="对月度关键结果拆解细分成详细的工作任务：
1、工作任务1完成过程
2、工作任务2完成过程
3、工作任务3完成过程" :disabled="detail.taskState == 2 || !isMeWork() || isUser(item)" :autosize="{ minRows: 4, maxRows: 8 }" />
                  </el-form-item>
                </el-col> -->
                <el-col :span="24" v-if="detail.taskType != '70'">
                  <el-form-item label="工作任务及落实情况" style="margin-bottom: 0;">
                    <el-input v-model="item.implementDescription" type="textarea" placeholder="1.工作任务1工作任务及实际完成情况。
2.工作任务2工作任务及实际完成情况。
3.工作任务3工作任务及实际完成情况。" :disabled="detail.taskState == 2 || !isMeWork() || isUser(item)"
                      :autosize="{ minRows: 4, maxRows: 8 }" />
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </div>
          <div class="add-btn" @click="addWorkProgressList" v-if="detail.taskState != 2 && isMeWork()"><i
              class="el-icon-plus" />添加
          </div>
          <div v-if="!workProgressList.length" class="empty-box">
            <img src="../../assets/img/empty.png" />
            <div>暂无数据</div>
          </div>
        </div>
        <div class="save-btn-box" v-if="detail.taskState != 2 && active && isMeWork()">
          <el-button type="primary" class="save-btn" @click="getSave(false)">保存</el-button>
        </div>
        <div v-if="!active" class="empty-box">
          <img src="../../assets/img/empty.png" />
          <div>暂无数据</div>
        </div>
      </div>
      <el-dialog :visible.sync="dialogVisible" title="新增" class="dialog-box" :close-on-click-modal="false">
        <el-form :model="role" label-width="110px" label-position="left" :rules="rules" ref="ruleForm">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item :label="detail.taskType === '10' ? '部门关键结果' : detail.taskType === '20' ? '科室关键结果' : '关键结果'"
                prop="subName">
                <el-input v-model="role.subName" type="textarea" placeholder="请输入关键结果"
                  :autosize="{ minRows: 2, maxRows: 4 }" />
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="detail.taskType != '50'">
              <el-form-item label="执行人" prop="subExecutors">
                <el-select v-model="role.subExecutors" multiple filterable remote placeholder="请输入执行人"
                  :remote-method="remoteMethod" :loading="loading">
                  <el-option v-for="item in options" :key="item.userName" :label="`${item.acName}(${item.cityName})`"
                    :value="item.userName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="detail.taskType != '70'">
              <el-form-item label="计划开始时间" prop="planStartTime">
                <el-date-picker v-model="role.planStartTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd" />
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="detail.taskType != '70'">
              <el-form-item label="计划完成时间" prop="planFinishTime">
                <el-date-picker v-model="role.planFinishTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div style="text-align:right;">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmRole" :loading="btnLoading">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog :visible.sync="dialogEditVisible" title="编辑" class="dialog-box" :close-on-click-modal="false">
        <el-form :model="detailForm" label-width="100px" label-position="left" style="width: 100%;">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item :label="detail.taskType === '10' ? '部门关键结果' : detail.taskType === '20' ? '科室关键结果' : '关键结果'">
                <el-input v-model="detailForm.subName" type="textarea" placeholder="请输入关键结果"
                  :autosize="{ minRows: 2, maxRows: 4 }" />
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="detail.taskType != '50'">
              <el-form-item label="执行人" prop="subExecutors">
                <el-select v-model="detailForm.subExecutors" multiple filterable remote placeholder="请输入执行人"
                  :remote-method="remoteMethod" :loading="loading">
                  <el-option v-for="item in options" :key="item.userName" :label="`${item.acName}(${item.cityName})`"
                    :value="item.userName">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="detail.taskType != '70'">
              <el-form-item label="计划开始时间">
                <el-date-picker v-model="detailForm.planStartTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd" />
              </el-form-item>
            </el-col>
            <el-col :span="24" v-if="detail.taskType != '70'">
              <el-form-item label="计划完成时间">
                <el-date-picker v-model="detailForm.planFinishTime" type="date" placeholder="选择日期" format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="24">
              <el-form-item label="自评分">
                <el-input-number v-model="detailForm.finishProgress" placeholder="请输入自评分（满分1分）" controls-position="right"
                  :min="0" :max="1" :precision="2" :step="0.1" />
              </el-form-item>
            </el-col> -->
          </el-row>
        </el-form>
        <div style="text-align:right;">
          <el-button @click="dialogEditVisible = false">取消</el-button>
          <el-button type="primary" @click="getSaveEdit" :loading="btnLoading">确定</el-button>
        </div>
      </el-dialog>
    </div>
    <div v-else class="detail-page">
      <div class="empty-box">
        <img src="../../assets/img/empty.png" width="120" />
        <div>当前目标已终止</div>
      </div>
    </div>

  </div>
</template>
<script>
import moment from 'moment'
import { addSubtasks, getPersonList, updateSubtask, deleteSubtask, getDetail, getBatch, getSubtasks, getBatchAll } from '@/api/api'
import { active } from 'sortablejs'
export default {
  name: 'workDetail',
  data() {
    return {
      btnLoading: false,
      dialogEditVisible: false,
      typeOptions: [
        {
          value: 0,
          label: '待开始'
        },
        {
          value: 1,
          label: '进行中'
        },
        {
          value: 2,
          label: '已完成'
        },
        {
          value: 3,
          label: '已延期'
        },
        {
          value: 4,
          label: '已终止'
        }
      ],
      zxrList: [],
      user: localStorage.getItem('userName'),
      detail: {},
      rules: {
        subName: [
          { required: true, message: '请输入关键结果', trigger: 'blur' }
        ],
        subExecutors: [
          { required: true, message: '请选择执行人', trigger: 'change', type: "array" }
        ],
        planStartTime: [
          { required: true, message: '请选择计划开始时间', trigger: 'change' }
        ],
        planFinishTime: [
          { required: true, message: '请选择计划完成时间', trigger: 'change' }
        ],
      },
      active: '',
      loading: false,
      fullscreenLoading: false,
      id: '',
      person: '',
      selectType: '1',
      dataListAll: [],
      dataList: [],
      currentRow: null,
      dialogVisible: false,
      role: { subExecutors: [] },
      height: 500,
      detailForm: {},
      detailItem: {},
      workProgressList: [],
      month: moment().format('YYYY-MM'),
      options: [],
      itemIndex: 0
    }
  },
  watch: {
    dialogVisible(val) {
      if (!val) {
        this.role = { subExecutors: [] }
        this.options = []
        this.$refs['ruleForm'].resetFields();
      }
    },
    $route(to, form) {
      if (to != form && to.path.indexOf('/work/detail') > -1) {
        if (this.detail.taskState != 2 && this.active && this.isMeWork()) {
          this.getSave(true)
        }
      }
    }
  },
  // beforeRouteEnter(to, from, next) {
  //   next(vm => {
  //     if (to.path.indexOf('/work/detail') > -1) {
  //       vm.detailContent();
  //     }
  //   });
  // },
  beforeRouteLeave(to, from, next) {
    if (this.detail.taskState != 2 && this.active && this.isMeWork()) {
      this.getSave(true)
    }
    next()
  },
  created() {
    this.fullscreenLoading = true;
    this.id = this.$route.params.id
    this.detailContent()
    this.height = this.getHeight()
    this.active = this.dataList.length && this.dataList[0]?.subId || ''
    this.detailItem = { ...this.dataList.length && this.dataList[0] }
    let that = this;
    window.onresize = function (event) {
      that.height = that.getHeight()
    }
  },
  methods: {
    isHaveAdd() {
      let list = this.dataList.filter(item => item.subExecutor.indexOf(this.user) > -1)
      return list.length > 0 || this.detail.executor == this.user || this.detail.distributor == this.user || this.detail.taskType == '70'
    },
    isMe() {
      if (this.detail.taskType != '70') {
        return this.detailItem.subExecutor.indexOf(this.user) > -1 || this.detail.executor == this.user || this.detail.distributor == this.user
      } else {
        return true
      }
    },
    isMeWork() {
      if (this.detail.taskType != '70') {
        return this.detailItem.subExecutor.indexOf(this.user) > -1
      } else {
        return true
      }
    },
    isUser(item) {
      if (this.detail.taskType == '70') {
        return false
      } else {
        return item.batchExecutor !== this.user
      }
    },
    searchPerson(val) {
      this.dataList = this.dataListAll.filter(item => item.subExecutor.indexOf(val) > -1)
    },
    isDel() {
      return (this.detail.taskState != 2 && (this.user == this.detail.executor || this.user == this.detail.distributor)) || (this.detail.taskState != 2 && this.detail.taskType == '70')
    },
    truncateToFixed(value, decimals) {
      const integerPart = Math.trunc(value || 0); // 获取整数部分
      const decimalPart = value - integerPart; // 获取小数部分
      const factor = Math.pow(10, decimals);
      const truncatedDecimalPart = decimalPart < 0 ? Math.ceil(decimalPart * factor) / factor : Math.floor(decimalPart * factor) / factor; // 根据正负选择向上或向下截断
      return integerPart + truncatedDecimalPart; // 组合整数部分和小数部分
    },
    detailContent() {
      getDetail(this.id).then(res => {
        this.detail = res.data || {}
        this.dataListAll = res?.data?.subTasks || []
        this.dataList = [...res?.data?.subTasks] || []
        if (!this.active && this.dataList.length) {
          this.changeActive(this.dataList[0], 0, true)
        } else if (this.active) {
          let activeItem = this.dataList.find(item => item.subId == this.active)
          this.changeActive(activeItem, this.itemIndex)
        }
        this.fullscreenLoading = false;
        if (this.person) {
          this.dataList = this.dataListAll.filter(item => item.subExecutor.indexOf(this.person) > -1)
        }
      });
    },
    delSubtask() {
      deleteSubtask(this.active).then(res => {
        this.active = ''
        this.dataList.splice(this.itemIndex, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.detailContent()
      });
    },
    getSaveEdit() {
      if (this.detailForm.planStartTime <= this.detailForm.planFinishTime) {
        this.detailForm.subExecutor = this.detailForm.subExecutors.join(',')
        this.btnLoading = true
        try {
          updateSubtask({ ...this.detailForm }, this.active).then(res => {
            if (res.code == 200) {
              this.detailItem = { ...this.detailForm }
              this.dialogEditVisible = false
              this.btnLoading = false
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.detailContent()
            }
          }).finally(e => {
            this.btnLoading = false
          })
        } catch (error) {
          this.btnLoading = false
        }

      } else {
        this.btnLoading = false
        this.$message({
          type: 'warning',
          message: '计划完成时间需晚于计划开始时间!'
        })
      }
    },
    getSave(flag) {
      let isOk = true
      let isZxrOk = true
      this.workProgressList.map((item) => {
        if (!item.taskName) {
          isOk = false
        }
        if (!item.batchExecutor) {
          isZxrOk = false
        }
      })
      if (isOk && isZxrOk) {
        let params = this.workProgressList.map(item => {
          let param = { ...item, progress: item.progress || 0 }
          return param
        })
        if (this.detail.taskType == '70') {
          getBatchAll([...params], this.active).then(res => {
            if (res.code == 200 && !flag) {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
            }
          })
        } else {
          let param = params.filter(item => item.batchExecutor === localStorage.getItem('userName'))
          getBatch([...param], this.active, localStorage.getItem('userName')).then(res => {
            if (res.code == 200 && !flag) {
              this.$message({
                type: 'success',
                message: '保存成功!'
              })
              this.detailContent()
            }
          })
        }

      } else {
        this.$message({
          type: 'warning',
          message: !isOk ? flag ? '关键结果不能为空，自动保存失败！' : '关键结果不能为空！' : flag ? '执行人不能为空，自动保存失败！' : '执行人不能为空！'
        })
      }
    },
    getStateName(state) {
      let find = this.typeOptions.find(item => item.value == state)
      return find?.label || state || ''
    },
    getColor(state) {
      let taskState = this.getStateName(state)
      const colors = {
        '超前': '#1ecd00',
        '正常': '#1ecd00',
        '已完成': '#1ecd00',
        '进行中': '#1890ff',
        '待开始': '#999',
        '已延期': '#ff4949',
        '落后': '#ff4949',
        '已终止': '#ff4949'
      }
      return colors[taskState]
    },
    changeActive(item, i, flag) {
      if (this.detail.taskState != 2 && this.active && this.isMeWork() && !flag) {
        this.getSave(true)
      }
      this.active = item.subId || ''
      this.itemIndex = i
      this.detailItem = { ...item }
      let subExecutor = item.subExecutor.split(',')
      let city = item.subBelonging.split(',')
      let subExecutorAcNames = item.subExecutorAcNames.split(',')
      this.zxrList = subExecutorAcNames.map((item, idx) => {
        return { acName: item, userName: subExecutor[idx], cityName: city[idx] }
      })
      getSubtasks(item.subId).then(res => {
        let list = res.data.map(itemSub => {
          return { ...itemSub }
        });
        this.workProgressList = list.length ? [...list] : []
      })
    },
    getPerson(acName) {
      this.loading = false;
      getPersonList({ acName }).then(res => {
        this.options = res || []
      })
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        this.getPerson(query.toLowerCase())
      } else {
        this.options = [];
      }
    },
    getHeight() {
      const winHieght = window.innerHeight
      return winHieght - 192
    },
    handleAddRole() {
      this.dialogVisible = true
    },
    getEdit() {
      let subExecutors = this.detailItem.subExecutor.split(',')
      let city = this.detailItem.subBelonging.split(',')
      let subExecutorAcNames = this.detailItem.subExecutorAcNames.split(',')
      let options = subExecutorAcNames.map((item, idx) => {
        return { acName: item, userName: subExecutors[idx], cityName: city[idx] }
      })
      this.options = options
      this.detailForm = { ...this.detailItem, subExecutors }
      this.dialogEditVisible = true
    },
    handleCurrentChange(val) {
      this.currentRow = val
    },
    async confirmRole() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          if (this.role.planStartTime <= this.role.planFinishTime || this.detail.taskType == '70') {
            let role = { ...this.role }
            let params = this.detail.taskType == '50' ? { subExecutors: [localStorage.getItem('userName')] } : {}
            if (this.detail.taskType == '70') {
              role = { ...this.role, planStartTime: moment().format('YYYY-MM-DD'), planFinishTime: '2099-12-31' }
            }
            this.btnLoading = true
            try {
              addSubtasks([{ ...role, subDescription: '', ...params }], this.id).then(res => {
                this.detailContent()
                this.dialogVisible = false
                this.btnLoading = false
              }).finally(e => {
                this.btnLoading = false
              })
            } catch (error) {
              this.btnLoading = false
            }

          } else {
            this.btnLoading = false
            this.$message({
              type: 'warning',
              message: '计划完成时间需晚于计划开始时间!'
            })
          }
        } else {
          this.btnLoading = false
          return false;
        }
      });

    },
    handleDelete() {
      this.$confirm('确认删除当前选中关键结果?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.delSubtask()
        })
        .catch(err => { console.error(err) })
    },
    addWorkProgressList() {
      let find = this.zxrList.find(item => item.userName === localStorage.getItem('userName'))
      this.workProgressList.push({ taskName: '', endTime: '', progress: 0, taskDescription: '', batchExecutor: find ? localStorage.getItem('userName') : '' })
    },
    delWorkProgress(index) {
      this.$confirm('确认删除当前工作进展?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          this.workProgressList.splice(index, 1)
        })
        .catch(err => { console.error(err) })
    }
  }
}
</script>
<style lang="scss" scoped>
.page {
  background: #f3f6fb;
  padding-top: 10px;
}

.detail-page {
  width: 100%;
  height: calc(100vh - 176px);
  display: flex;
}

.left-box {
  width: 350px;
  height: 100%;
  border-right: 1px solid #ddd;
  padding: 16px;
  background: #fff;
}


::v-deep .el-input-group__prepend {
  width: 105px;
}

.btn-box {
  margin-bottom: 12px;
}

::v-deep .el-table--scrollable-y .el-table__body-wrapper {

  /* 滚动条整体部分 */
  &::-webkit-scrollbar {
    width: 6px;
    /* 滚动条的宽度 */
    height: 6px;
    /* 滚动条的高度 */
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    background-color: rgb(206, 206, 206);
    /* 滑块颜色 */
    border-radius: 10px;
    width: 6px;
  }

  /* 滚动条轨道 */
  &::-webkit-scrollbar-track {
    background: #fff;
    width: 6px;
    /* 轨道颜色 */
  }

  /* 滚动条按钮 (上下箭头) */
  &::-webkit-scrollbar-button {
    display: none;
  }
}

::v-deep .el-table__body {
  width: 100% !important;
}

.dialog-box {

  ::v-deep .el-select,
  ::v-deep .el-date-editor.el-input,
  ::v-deep .el-date-editor.el-input__inner {
    width: 100%;
  }
}

.detail-content {
  width: 100%;
  height: auto;
  border-radius: 7px;
  background: #f3f6fb;
  display: flex;
  padding: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
  font-size: 14px;
  position: relative;

  .label-value {
    width: 33.3%;
    line-height: 30px;
  }

  .el-icon-delete {
    position: absolute;
    right: 16px;
    top: 10px;
    font-size: 20px;
    cursor: pointer;
    z-index: 999;

    &:hover {
      color: #ff4949;
    }
  }
}

.detail-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;

  .line {
    height: 20px;
    width: 4px;
    background: #1890ff;
    margin-top: 3px;
    margin-right: 8px;
    border-radius: 5px;
  }
}

.content-box {
  height: calc(100% - 60px);
  overflow-y: auto;
  padding: 16px;

  /* 滚动条整体部分 */
  &::-webkit-scrollbar {
    width: 6px;
    /* 滚动条的宽度 */
    height: 6px;
    /* 滚动条的高度 */
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    background-color: rgb(206, 206, 206);
    /* 滑块颜色 */
    border-radius: 10px;
    width: 6px;
  }

  /* 滚动条轨道 */
  &::-webkit-scrollbar-track {
    background: #fff;
    width: 6px;
    /* 轨道颜色 */
  }
}

.save-btn-box {
  width: 100%;
  height: 60px;
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff;
  text-align: right;
  padding: 0 16px;
  border-top: 1px solid #ddd;

  .save-btn {
    margin-top: 12px;
  }
}

::v-deep .el-form-item {
  margin-bottom: 16px;
}

.top-detail {
  display: flex;
  padding: 4px 16px;
  flex-wrap: wrap;
  font-size: 14px;
  background-color: #fff;
  margin: 0 16px 10px;
  line-height: 32px;
  border-radius: 7px;
  position: relative;

  .month-search {
    position: absolute;
    right: 0;
    top: 5px;
  }

  .work-name {
    font-size: 19px;
    width: 100%;
    color: #000;
    font-weight: bold;

    .title-name {
      width: 100%;
      // overflow: hidden;
      // text-overflow: ellipsis; 
      // white-space: nowrap;
    }
  }


}

.right-box {
  width: calc(100% - 351px);
  height: 100%;
  background: #fff;
  position: relative;

  ::v-deep .el-form-item--medium .el-form-item__label {
    line-height: 14px;
    color: #333;
  }

  ::v-deep .el-select,
  ::v-deep .el-date-editor.el-input,
  ::v-deep .el-date-editor.el-input__inner,
  ::v-deep .el-input-number--medium {
    width: 100%;
  }

  ::v-deep .el-input-number.is-controls-right .el-input__inner {
    text-align: left;
  }

  .top-detail {
    padding: 0;
    margin: 0 0 10px;

    .work-name {
      position: relative;
    }

    .title-name-text {
      font-size: 17px;
    }

    .el-icon-edit-outline {
      position: absolute;
      margin-top: 8px;
      font-size: 20px;
      cursor: pointer;
      z-index: 999;
      margin-left: 5px;

      &:hover {
        color: #1890ff;
      }
    }
  }
}

.label-value {
  max-width: 200px;
  margin-right: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.add-btn {
  width: 100%;
  text-align: center;
  line-height: 36px;
  height: 36px;
  border: 1px dashed #bbb;
  border-radius: 5px;
  cursor: pointer;
  background: #f3f3f3;
  font-size: 14px;

  &:hover {
    background: #eee;
  }
}

::v-deep .el-date-editor.el-input {
  width: 100%;
}

.table-box {
  margin-top: 10px;
  height: calc(100vh - 300px);
  overflow: auto;
}

/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.table-box::-webkit-scrollbar {
  width: 8px;
  height: 0px;
  background-color: #F5F5F5;
}

/*定义滚动条轨道 内阴影+圆角*/
.table-box::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #F5F5F5;
}

/*定义滑块 内阴影+圆角*/
.table-box::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background-color: #ccc;
}

.table-item {
  border-bottom: 1px solid #ddd;
  padding: 10px;
  cursor: pointer;
  position: relative;
  padding-left: 90px;
  min-height: 88px;

  &:hover {
    background: #f3f6fb;
  }

  .table-name {
    color: #333;
    font-weight: bold;
    font-size: 15px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    width: 100%;
  }

  .table-subExecutor {
    color: #666;
    font-size: 14px;
    margin-top: 8px;
    width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .pie-box {
    width: 70px;
    height: 70px;
    position: absolute;
    left: 10px;
    top: 8px;
    border-radius: 10px;
    // background: linear-gradient(to bottom, #96f9a8, #1890ff);
    background: #1890ff;
    color: #fff;
    text-align: center;

    .num {
      font-size: 18px;
      font-weight: bold;
      margin-top: 15px;
    }

    .name {
      font-size: 12px;
    }
  }
}

.table-item-choice {
  background: #1890ff !important;

  .table-name {
    color: #fff;
  }

  .table-subExecutor {
    color: #d9edff;
    font-size: 14px;
    margin-top: 8px;
  }

  .pie-box {
    background: #fff;
    color: #1890ff
  }
}

.table-item-db {
  padding-left: 10px;
}

.empty-box {
  text-align: center;
  color: #999;
  line-height: 40px;
  margin-top: 100px;
  width: 100%;
}

::v-deep .el-input.is-disabled .el-input__inner,
::v-deep .el-textarea.is-disabled .el-textarea__inner,
::v-deep .el-range-editor.is-disabled,
::v-deep .el-range-editor.is-disabled input {
  background-color: #fbfbfb;
  border-color: #dfe4ed;
  color: #000;
  cursor: not-allowed;
}

.num-border {
  width: 0;
  height: 0;
  border: 35px solid;
  border-color: #1890ff #d7fdff #d7fdff #1890ff;
  border-radius: 10px;
  color: #fff;
  position: relative;
  font-size: 17px;
  font-weight: bold;
  position: absolute;
  left: 10px;
  top: 8px;

  .num {
    position: absolute;
    left: -5px;
    top: 8px;
    width: 37px;
    text-align: center;
    color: #1890ff;
  }

  .zpf-num {
    position: absolute;
    top: -27px;
    left: -31px;
    width: 37px;
    text-align: center;
  }
}

.table-item-choice {
  .num-border {
    border-color: #fff #d7fdff #d7fdff #fff;
    color: #1890ff;
  }
}

::v-deep .el-textarea__inner {
  color: #000;
}
</style>
